<template>
    <div class="taskDetail">
        <wtop></wtop>
        <div class="center">
            <div class="right">
                <!-- <div class="where">当前位置：外呼系统>任务管理>{{taskname}}任务明细</div> -->

                <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                <div class="taskMission">
                  <div class="title">{{taskname}}任务明细</div>
                </div>
                <div class="conlist" v-loading='loading'>
                    <div class="kflexc">
                        <div class="gong gl" style="margin-bottom: 20px;">
                          <el-select clearable v-model="formInline.num" style="margin-right: 20px; width: 200px;" placeholder="请选择拨打次数">
                           <el-option
                             v-for="item in numList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                          </el-select>
                          <el-select clearable v-model="formInline.tag" style="margin-right: 20px; width: 200px;" placeholder="请选择快速标签">
                           <el-option
                             v-for="item in tagList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                           </el-option>
                          </el-select>
                          <el-date-picker style="width: 470px; margin-right: 20px;" v-model="times" @change="timechange"
                          	clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                          	range-separator="——" start-placeholder="开始时间" end-placeholder="结束时间">
                          </el-date-picker>
                          <el-button type="danger" round @click="search">检索</el-button>
                        </div>
                    </div>
                    <div class="kflexc" style="margin-bottom: 20px;">
                        <el-button type="primary" round plain @click="downloadTask">导出任务明细</el-button>
                        <span @click="goid('/order_export_waihurenwu')" style="color: #409EFF; margin-left: 30px;">
                          查看导出
                        </span>
                    </div>
                    <div class="list">
                        <div class="th">业务ID</div>
                        <div class="th">拨打时间</div>
                        <div class="th">联系电话</div>
                        <div class="th">用户意向标签</div>
                        <div class="th">拨打次数</div>
                        <div class="th">外呼目标达成</div>
                        <div class="th">任务执行人</div>
                        <div class="th">最后一次外呼人</div>
                        <div class="th">外呼备注</div>
                    </div>
                    <div class="list" v-for="item in list" :key="item.id">
                        <div class="td">{{item.mission_id}}</div>
                        <div class="td">{{item.last_call_at}}</div>

                        <div class="td">{{item.mobile}}</div>
                        <div class="td">{{item.tag_name}}</div>
                        <div class="td">{{item.times}}</div>
                        <div class="td">{{item.result}}</div>
                        <div class="td">{{item.caller_name}}</div>
                        <div class="td">{{item.log_caller_name}}</div>
                        <div class="td">{{item.remark}}</div>
                    </div>
                    <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                </div>
            </div>
        </div>

        <wfoot></wfoot>
    </div>

</template>

<script>
    import axios from 'axios'
    import wtop from '@/components/callsystem/wtop.vue'
    import wfoot from '@/components/callsystem/wfoot.vue'
    import moment from "moment";

    export default {
        components: {
            "wtop": wtop,
            "wfoot": wfoot
        },
        name: "taskDetail",
        data() {
            return {
                total:0,
                pagesize:20,
                page:1,
                list:[],
                loading:false,
                mobile:"",
                startCall: false,
                id: '',
                taskname: '',
                formInline: {
                  num: '',
                  tag: '',
                  start_time:"",
                  end_time:""
                },
                numList: [
                  {
                    value: '1',
                    label: '已呼过1次'
                  },
                  {
                    value: '2',
                    label: '已呼过2次'
                  },
                  {
                    value: '3',
                    label: '3次及以上'
                  },
                ],
                tagList: [],
                leader: '',
                url: '',
                times:[]
            }
        },
        created() {
          this.url = window.location.origin
          this.id = this.$route.query.id
          var user = JSON.parse(localStorage.getItem('USER'));
          this.user_func = user.functions
          for( var i in this.user_func){
              var func_number = this.user_func[i].code
              if(func_number.indexOf("K03") >= 0){ this.leader = 1 }
          }
          this.getlist()
          this.moretagList()
        },
        mounted() {

        },
        methods: {
          timechange:function(){
            if(this.times != null){
            	this.formInline.start_time = this.times[0];
            	this.formInline.end_time = this.times[1];
            }else{
              this.formInline.start_time = ''
              this.formInline.end_time = ''
            }
          },
          //导出
          downloadTask(){
            let data = new FormData()
            data.task_id = this.id
            data.times = this.formInline.num
            data.tag = this.formInline.tag
            data.start_time = this.formInline.start_time
            data.end_time = this.formInline.end_time

            axios.get(this.url+'/api/plan-market/call/task/details/export',{params:data})
              .then(response => {
                if(response.data.msg.code == 0){
                  // var a = document.createElement("a");
                  // a.setAttribute("href", that.url+'/'+response.data.data);
                  // a.click();
                  // that.downloadReport = false
                  this.goid('/order_export_waihurenwu')
                }else{
                  this.$message.error(response.data.msg.info);
                }
            })

            // var a = document.createElement("a");
            // a.setAttribute("href", this.url+'/api/plan-market/call/task/details/export?task_id='+this.id);
            // a.click();
          },
          //意向标签
          moretagList(){
            var that = this
            axios.get("/api/plan-market/call/tag/list")
              .then(function(response) {
                  if (response.data.msg.code == 0) {
                    that.tagList = response.data.data
                  }else{
                      that.$message.error(response.data.msg.info);
                  }
              })
          },
            search:function(){
              this.page = 1
                this.getlist()
            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
            //获取列表
            getlist:function(){
                var that = this
                this.loading = true
                let data = new FormData()
                data.page = this.page
                data.page_size = this.page_size
                data.task_id = this.id
                data.times = this.formInline.num
                data.tag = this.formInline.tag
                data.start_time = this.formInline.start_time
                data.end_time = this.formInline.end_time
                this.leader ? data.is_leader = this.leader : ''
                axios.get('/api/plan-market/call/task/details?success_all=1', {params:data})
                	.then(response => {
                		if(response.data.msg.code == 0){
                      that.taskname = response.data.data.task.name
                      that.list = response.data.data.details.data

                      let resultArr = ['未达成','已达成']
                      for(let i in that.list){
                        that.list[i].result = resultArr[that.list[i].result]
                      }
                      that.total = response.data.data.details.total
                      that.loading = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            //下面使用的格式化时间
            formatDate:function(numb) {
              const time = new Date((numb - 1) * 24 * 3600000 + 1)
              time.setYear(time.getFullYear() - 70)
              const year = time.getFullYear() + ''
              const month = time.getMonth() + ''
              let date = time.getDate() + ''
              if(time.getFullYear()%4 === 0){
                var X = moment([year, month, date]).subtract(1, 'days').format('YYYY-MM-DD');
              }else{
                var X = moment([year, month, date]).format('YYYY-MM-DD');
              }
              return X
            },
        }
    }
</script>

<style lang="scss" scoped>
    .taskDetail{ margin: 0; padding: 0; background: #EFEFEF;
        /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
        /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
        /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
        /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
            color: #fff;
        }
        /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
            color: #2974FF;
        }
        /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
        /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
        /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

        /deep/ .el-table th{ background: rgb(234, 234, 234); color: rgb(110, 110, 110);}
        /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
        /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
        /deep/ .el-button{ padding: 11px 23px !important;}
        /deep/ .el-button--text{ padding: 11px 5px !important;}
        /deep/ .el-button--mini{ padding: 6px 15px !important;}
        /deep/ .el-button--danger {
            color: #FFF;
            background-color: #2974FF;
            border-color: #2974FF;
        }
     


        .listupload{ font-size: 14px;
            .li{flex: 1; line-height: 38px; margin-top: 20px;}
            .el-button--primary{ background: #ffffff; color: #409EFF; border-color: #409EFF; }

        }
        .center{ min-width: 1366px;width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
    		.right{ flex-basis: 1366px; background: #ECECEC;
              .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
              .taskMission{
                background: #fff;font-size: 14px;
                .content{padding: 20px 20px;color: #727272;font-size: 14px;
                  .ht{padding-bottom: 20px;display: flex;
                    .tab{width: 100px;text-align: right;}
                  }
                }
              }
            }
            .powertop{ display: flex; width: 640px; }
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .con{  background: #FFFFFF; padding: 30px 40px; display: flex; justify-content: space-between;
                .conleft{
                    .flex{ display: flex; margin-bottom: 20px;}
                    .gong{ margin-right: 30px; color: #333}
                }
                .conright{
                    .el-input__inner{ line-height: 40px !important; height: 40px !important;}
                }
            }
            .conlist{ padding: 30px; background: #FFFFFF;
                .flex{ display: flex; justify-content: space-between}
                .gong{ display: flex;
                    .el-date-editor.el-input{ width: 200px;}
                    .el-input__inner{ width: 250px;}
                    .el-button--danger{ margin-left: 20px;}
                    .el-button--primary{ padding: 10px 30px; background: #EEF7FF; border: 1px #EEF7FF solid; margin-left: 20px;}
                    .el-date-editor--month{ margin-right: 20px;}
                }
                .gl{ margin-bottom: 20px;

                    /deep/ .el-input__inner{ width: 200px; }
                    .el-button--danger{ margin-left: 0px !important; margin-right: 20px;}
                }

                .ml{
                  .el-button--danger{ margin-left: 10px!important;}
                }
                .list{ display: flex; border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px;}
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 15px 0; font-size: 14px;}
                    .td2{ flex: 1.5}
                }
                .el-pagination{ text-align: right; margin: 20px 0}
            }
    	}
      .formflex{display: flex;justify-content: space-between;
        /deep/ .el-input__inner{ width: 200px; }
        .lineflex{display: flex;
          .el-button--text{height: 40px;margin-left: 20px;}
        }

      }
      .formsubmit{justify-content: center;}

    }
</style>
